<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-config-provider>
</template>
<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enUS from 'ant-design-vue/lib/locale-provider/en_US';
  import frFR from 'ant-design-vue/lib/locale-provider/fr_FR';
  import enquireScreen from '@/utils/device'
  import { getLang } from '@/utils/locale.js'
  export default {
    data () {
      return {
        locale: zhCN,
        messages: {
          'zh-CN': zhCN,
          'en-US': enUS,
          'fr-FR': frFR
        }
      }
    },
    computed: {
      systemName() {
        return process.env.VUE_APP_SYSTEM_NAME;
      },
      logoUrl() {
        return  process.env.VUE_APP_LOGO_URL;
      }
    },
    created () {
      let that = this
      const lang = getLang();
      this.locale = this.messages[lang.replace('-', '')];
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }
      })
      this.setDocTitle();
      this.setFavicon();
    },
    methods:{
      setDocTitle(){
        document.title = this.$t(this.systemName);
      },
      setFavicon(){
        const oldLink = document.querySelector('link[rel="icon"]');
        oldLink.href = this.logoUrl;
      }
    }
  }
</script>
<style>
  #app {
    height: 100%;
  }
</style>